<template>
	<view>
		<gracePage headerBG="#FFFFFF" :customHeader="false">
			<view slot="gBody">
				<!-- 搜索 -->
				<graceSearch class="margin-xs" background="#FFFFFF" inputHeight="" placeholder="请输入编号或名称">
				</graceSearch>
				<!-- 下拉选择 -->
				<view class="grace-nowrap grace-flex-vcenter grace-border-b" style="background:#FFFFFF;">
					<view class="graceSelectMenuItem">
						<graceSelectMenu :show="show1" :height="300" :selectIndex="selectIndex1" :items="selectMenu1" @showMenu="showMenu1"
						 @close="closeMenu1" @select="select1"></graceSelectMenu>
					</view>
					<view class="graceSelectMenuItem">
						<graceSelectMenu :show="show2" :height="300" :selectIndex="selectIndex2" :items="selectMenu2" @showMenu="showMenu2"
						 @close="closeMenu2" @select="select2"></graceSelectMenu>
					</view>
					<view class="graceSelectMenuItem">
						<graceSelectMenu :show="show3" :height="300" :selectIndex="selectIndex3" :items="selectMenu3" @showMenu="showMenu3"
						 @close="closeMenu3" @select="select3"></graceSelectMenu>
					</view>
				</view>
				<!-- 列表 -->
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="cuIcon-title text-orange"></text> 查询列表
					</view>
				</view>
				<scroll-view>
					<form>
						<view v-for="(item,index) in searchDataList" :key="index" :data-id="index">
							<view class="cu-form-group" :class="index==0?'':'margin-top'">
								<view class="title">{{item.name}}</view>
								<view>
									<button class="cu-btn bg-green shadow" @tap="showModal" data-target="bottomModal">添加</button>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="title">编号</view>
								<input :value="item.code" name="input" disabled></input>
							</view>
							<view class="cu-form-group">
								<view class="title">管理地区</view>
								<input :value="item.location" name="input"></input>
							</view>
						</view>
					</form>
				</scroll-view>

				<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
					<view class="cu-dialog test" style="text-align: left;">
						<view class="cu-bar bg-white">
							<view class="action text-green">添加</view>
							<view class="action text-blue" @tap="hideModal">取消</view>
						</view>
						<view>


							<form>
								<view class="cu-form-group margin-top">
									<view class="title">租主姓名</view>
									<input placeholder="两字短标题" name="input"></input>
								</view>
								<view class="cu-form-group">
									<view class="title">年龄</view>
									<input placeholder="三字标题" name="input"></input>
								</view>
								<view class="cu-form-group">
									<view class="title">联系方式</view>
									<input placeholder="统一标题的宽度" name="input"></input>
								</view>
								<view class="cu-form-group">
									<view class="title">承租合同</view>
									<input placeholder="文件名" name="input"></input>
									<button class="cu-btn round bg-green shadow"><text class="cuIcon-upload"></text> 上传</button>
								</view>
								<view class="cu-form-group">
									<view class="title">起始时间</view>
									<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
										<view class="picker">
											{{date}}
										</view>
									</picker>
								</view>
								<view class="cu-form-group">
									<view class="title">终止时间</view>
									<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
										<view class="picker">
											{{date}}
										</view>
									</picker>
								</view>
							</form>

						</view>
					</view>
				</view>
			</view>
		</gracePage>
	</view>
</template>

<script>
	import cuCustom from "../../plugin/colorui/components/cu-custom.vue";
	import gracePage from "../../plugin/graceUI/components/gracePage.vue";
	import graceSelectMenu from "../../plugin/graceUI/components/graceSelectMenu.vue";
	import graceSearch from "../../plugin/graceUI/components/graceSearch.vue";

	export default {
		data() {
			return {
				date:"2020-10-24",
				modalName: null,
				// 第 1 个菜单
				show1: false,
				selectMenu1: ['所属农场', '全部', 'XX农场', 'XX农场', 'XXX农场'],
				selectIndex1: 0,
				// 第 2 个菜单
				show2: false,
				selectIndex2: 0,
				selectMenu2: ['种植面积', '全部', '0-10公顷', '11-50公顷', '51-100公顷', '100-1000公顷'],
				// 第 3 个菜单
				show3: false,
				selectMenu3: ['土壤类型', '全部', '棕壤', '暗棕壤', '白浆土', '黑土'],
				selectIndex3: 0,

				searchDataList: [{
					name: 'X地块',
					code: '123456',
					location: 'X管理区'
				}, {
					name: 'XX地块',
					code: '123456',
					location: 'XX管理区'
				}, {
					name: 'XXX地块',
					code: '123456',
					location: 'XXX管理区'
				}, {
					name: 'XXX地块',
					code: '123456',
					location: 'XXX管理区'
				}]
			};
		},
		components: {
			gracePage,
			graceSearch,
			graceSelectMenu
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},

			showMenu1: function() {
				this.show1 = true;
			},
			closeMenu1: function() {
				this.show1 = false;
			},
			select1: function(index) {
				//console.log("选择了 " + this.selectMenu1[index]);
				this.$http.post(this.selectUrl, {
					location: this.selectMenu1[index]
				}).then(res => {
					//console.log(res)
					if (res.data.ok) {
						//console.log("sucess")
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('失败！')
				});
			},
			showMenu2: function() {
				this.show2 = true;
			},
			closeMenu2: function() {
				this.show2 = false;
			},
			select2: function(index) {
				//console.log("选择了 " + this.selectMenu2[index]);
				this.$http.post(this.selectUrl, {
					location: this.selectMenu2[index]
				}).then(res => {
					//console.log(res)
					if (res.data.ok) {
						//console.log("sucess")
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('失败！')
				});

			},
			// 第三个菜单
			showMenu3: function() {
				this.show3 = true;
			},
			closeMenu3: function() {
				this.show3 = false;
			},
			select3: function(index) {
				//console.log("选择了 " + this.selectMenu3[index]);
				this.$http.post(this.selectUrl, {
					location: this.selectMenu1[index]
				}).then(res => {
					//console.log(res)
					if (res.data.ok) {
						//console.log("sucess")
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('失败！')
				});
			}
		}
	}
</script>

<style>
	.graceSelectMenuItem {
		width: 200rpx;
		line-height: 90rpx;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
